<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head
        content must come *after* these tags -->
        <meta name="description" content="Frank Fu's Home.">
        <meta name="author" content="Frank Fu">
        <meta name="keywords" content="Python, Web, CS,">
        <meta property="og:locale" content="zh_CN" />
        <meta property="og:site_name" content="Frank Fu's" />
        <link rel="shortcut icon" href=" /static/favicon.ico" />
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="/static/css/bootstrap.min.css">
        <!-- Awesome Font CSS -->
        <link rel="stylesheet" href="/static/css/font-awesome.min.css">
        <!-- customized CSS -->
        <link rel="stylesheet" href="/static/css/index.css">
        <!-- javascript -->
        <script src="/static/js/jquery.min.js">
        </script>
        <script src="/static/js/bootstrap.min.js">
        </script>
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
        queries -->
        <!--[if lt IE 9]>
            <script src="/static/js/html5shiv.min.js">
            </script>
            <script src="/static/js/respond.min.js">
            </script>
        <![endif]-->
        <title>
            Frank Fu's Home
        </title>
    </head>
    <body style="background-color:#FAF7FA">
        <!-- Navigation Bar!! -->
        <nav class="navbar navbar-inverse" style="z-index:10">
            <!-- Define the container -->
            <div class="container-fluid">
                <!-- The header of the website -->
                <!-- Define the responsive collapse button -->
                <!-- Three <span> tags works as three-bar icon -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                    </button>
                    <a class="navbar-brand" href="/">
                        &nbsp;
                        <strong class="iconlogo">
                            Hanker
                        </strong>
                    </a>
                </div>
                <!-- Then the list items of the navi-bar -->
                <div class="collapse navbar-collapse navbar-right" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li id="blogs">
                            <a href="/blogs?page=1">
                                <i class="fa fa-newspaper-o fa-2x" aria-hidden="true">
                                </i>
                                BLOG
                            </a>
                        </li>
                        <li id="photos">
                            <a href="/photos?page=1">
                                <i class="fa fa-camera-retro fa-2x" aria-hidden="true">
                                </i>
                                PHOTO
                            </a>
                        </li>
                        <li id="about">
                            <a href="/about">
                                <i class="fa fa-user fa-2x" aria-hidden="true">
                                </i>
                                ABOUT.ME
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- JUMBOTRON -->
        <div class="jumbotron">
            <div class="myWords container-fluid">
                <h1 class="jumbotronName text-center">
                    Frank Fu
                </h1>
                <p class="jumbotronSay text-center">
                    我可以划船不用浆，
                    <br>
                    也可以扬帆没有风！
                    <br>
                    因为我这一生，全靠浪~~~~~~
                </p>
                <p class="jumbotronSay text-center">
                    爷爷的爸爸和爸爸的爷爷是同一个人
                    <br>
                    而奶奶的妈妈和妈妈的奶奶却不是同一个人
                    <br>
                    因为：二阶偏导次序不影响结果的前提是导数在区间连续！
                </p>
                <p class="jumbotronSay text-center">
                    天将降大任于斯人也,必先盗其QQ，封其微信，收其电脑，夺其手机，
                    <br>
                    摔其ipad，断其wifi，剪其网线，砸其电视，抢其酒瓶……使其百无聊赖，
                    <br>
                    然后静坐、思过、锻炼、读书、明智、开悟、精技…
                </p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="jumbotronSay text-center col-sm-4">
                        <div class="indexCatagories" href="/blogs?page=1">
                            <i class="fa fa-newspaper-o fa-5x" aria-hidden="true">
                            </i>
                            <p>
                                View My Blogs
                            </p>
                        </div>
                    </div>
                    <div class="jumbotronSay text-center col-sm-4">
                        <div class="indexCatagories" href="/photos?page=1">
                            <i class="fa fa-camera-retro fa-5x" aria-hidden="true">
                            </i>
                            <p>
                                Photographs
                            </p>
                        </div>
                    </div>
                    <div class="jumbotronSay text-center col-sm-4">
                        <div class="indexCatagories" href="/about">
                            <i class="fa fa-user fa-5x" aria-hidden="true">
                            </i>
                            <p>
                                More About Me
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- all the content after navbar comes in one container-fluid block -->
        <div class="container-fluid">
            <!-- footer -->
            <footer class="panel panel-footer">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4 text-center">
                            <div class="btn-group">
                    <a class="btn btn-default" href="https://github.com/rxjhfmf" target="_blank" 
                       title="Follow me on Github"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
                    <a class="btn btn-default" href="http://weibo.com/u/5623066082" target="_blank" 
                       title="Follow me on Weibo"><i class="fa fa-weibo fa-2x" aria-hidden="true"></i></a>
                    <a class="btn btn-default" href="./static/photos/WeChat.png" target="_blank" 
                       title="Follow me on WeChat"><i class="fa fa-weixin fa-2x" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    <div class="col-sm-8">
                    <p class="footer-text">
                        Powered by Python &nbsp;&nbsp; &copy; 2016 Fu Mingfeng
                    </p>
                    <p class="footer-text">
                        Photo gallery designed by
                        <a target="_blank" href="https://github.com/michaelsoriano/bootstrap-photo-gallery">
                            Michael Soriano
                        </a>
                    </p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
        <script>
            function resizeBackground() {
                var last = $('.indexCatagories:last');
                var maxHeight = last.offset().top + last.height();
                var element = $('.jumbotron');
                element.height(maxHeight);
                var jumbotronX = element.width();
                var jumbotronY = element.height();
                if (jumbotronX / 4 > jumbotronY / 3) {
                    element.css('background-size', '100% auto');
                } else {
                    element.css('background-size', 'auto 100%');
                }
            }
            $(document).ready(function() {
                resizeBackground();
                $(window).resize(function() {
                    resizeBackground();
                });
                $('.indexCatagories').click(function() {
                    window.location.href = $(this).attr("href");
                })
            });
        </script>
    </body>

</html>